import { _decorator, Component, Node, Label, Widget } from 'cc';
import { BaseView } from '../../../../scripts/libs/rxjs/cc3/BaseView';
import { ReactiveProperty } from '../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { concat, forkJoin, NEVER, Observable, Subscription } from 'rxjs';
import { nullifySubscription } from '../../../../scripts/libs/rxjs/utils';
import { UITransform } from 'cc';
import { UIOpacity } from 'cc';
import { Timer } from '../../../../scripts/libs/rxjs/cc3/CreatorSchedule';
import { TweenToStart } from '../../../../scripts/libs/rxjs/cc3/TweenStart';
import { instantFunc, TransparentPass } from '../../../../scripts/libs/rxjs/cc3/CommonObservable';
import { LayoutEx } from '../../../../scripts/libs/utils/Component/LayoutEx';
const { ccclass, property } = _decorator;

@ccclass('FrontTipItem')
export class FrontTipItem extends BaseView {

    @property(Node)
    board: Node = null;

    @property(Label)
    messageLabel: Label = null;

    message = ReactiveProperty.Create('');

    _targetHeight = 0; // 目标高度

    willBind(): void {
        let messageLabelTransform = this.messageLabel.getComponent(UITransform);
        messageLabelTransform.width = Math.min(2048, this.node.getComponent(UITransform).width);
    }

    useObserves() {
        return [
            this.message.subscribe(_ => {
                this.messageLabel.string = _;
                this.messageLabel.updateRenderData(true);


                this.node.getComponent(LayoutEx).updateLayout();
                this.board.getComponent(Widget).updateAlignment();
                this._targetHeight = this.board.getComponent(UITransform).height;
            }),
        ];
    }

    inAnim() {
        return new Observable(observer => {
            this.board.getComponent(Widget).enabled = false;
            this.board.getComponent(UITransform).height = 0;
            this.messageLabel.getComponent(UIOpacity).opacity = 0;

            let _sub = forkJoin([
                concat(Timer(0), TweenToStart(this.board.getComponent(UITransform), .2, { height: this._targetHeight }, { easing: 'expoOut' })),
                concat(Timer(.1), TweenToStart(this.messageLabel.getComponent(UIOpacity), .2, { opacity: 255 }, { easing: 'quadOut' }))
            ]).subscribe(TransparentPass(observer));

            return () => {
                _sub.unsubscribe();
            }
        });
    }

    outAnim() {
        return new Observable(observer => {

            let _sub = forkJoin([
                concat(Timer(0), TweenToStart(this.messageLabel.getComponent(UIOpacity), .2, { opacity: 0 }, { easing: 'quadIn' })),
                concat(Timer(.1), TweenToStart(this.board.getComponent(UITransform), .2, { height: 0 }, { easing: 'expoIn' })),
            ]).subscribe(TransparentPass(observer));

            return () => {
                _sub.unsubscribe();
                if (this.node?.isValid) this.node.destroy();
            }
        });
    }
}


